<template>
	<view>
		<view class="list_item" v-for="(listItem, index) in orderList" :key="index">
			<view class="info_panel">
				<image class="image" :src="listItem.image" mode=""></image>
				<view class="info">
					<view class="info_header">
						<viwe class="title">
							<view class="titile_text">{{ listItem.name }}</view>
							<view class="sign green" v-if="listItem.zhengce == $enums['服务政策']['公益']">公益</view>
							<view class="sign orange" v-if="listItem.zhengce == $enums['服务政策']['常规']">常规</view>
						</viwe>
						<view class="type" v-if="listItem.status == enums['机构订单状态']['待服务']">待服务</view>
						<view class="type" v-if="listItem.status == enums['机构订单状态']['已服务']">已服务</view>
						<view class="type" v-if="listItem.status == enums['机构订单状态']['已评价']">已服务</view>
						<view class="type" v-if="listItem.status == enums['机构订单状态']['老人已取消'] || listItem.status == enums['机构订单状态']['机构已取消']">已取消</view>
						<view class="type" v-if="listItem.status == enums['机构订单状态']['已超时']">已超时</view>
						<view class="type" v-if="listItem.status == enums['机构订单状态']['服务中']">服务中</view>
					</view>
					<view class="info_container">
						<view class="tel">{{ listItem.username }}&nbsp;{{ listItem.phone }}</view>
						<view class="site">
							<text class="nursing-icon iconyemian"></text>
							<view class="text">{{ listItem.address }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="price_panel">
				<view class="price">
					<view class="total">总价：¥{{ listItem.money | toFixed(2) }}</view>
					<view class="subsidy">补助金额：¥{{ listItem.subsidy | toFixed(2) }}</view>
					<view class="payment">实付款：¥{{ listItem.answer | toFixed(2) }}</view>
				</view>
				<view class="btn_panel">
					<view class="btn_left"><view class="cancel" v-if="listItem.status == enums['机构订单状态']['待服务']" @tap="cancelOrder(listItem.id)">取消订单</view></view>
					<view class="btn_right">
						<view class="detail" :class="{ cancel: listItem.status == enums['机构订单状态']['已超时'] }" @tap="toDetail(listItem)">订单详情</view>
						<view class="confirm" v-if="listItem.status == enums['机构订单状态']['待服务']" @tap="goServe(listItem.id)">前往服务</view>
						<view class="confirm" v-if="listItem.status == enums['机构订单状态']['服务中']" @tap="completeOrder(listItem.id)">完成服务</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as serveApi from '@/api/orgApi/serve.js';
export default {
	props: {
		orderList: null
	},
	data() {
		return {
			enums: this.$enums
		};
	},
	methods: {
		completeOrder(id) {
			serveApi
				.completeOrder({ id: id })
				.then(res => {
					if (res.code === 0) {
						this.$emit('search');
					}
				})
				.catch(e => {
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
		},
		goServe(id) {
			serveApi
				.receiving({ id: id })
				.then(res => {
					if (res.code === 0) {
						this.$emit('search');
					}
				})
				.catch(e => {
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
		},
		cancelOrder(id) {
			serveApi
				.cancelOrder({ id: id })
				.then(res => {
					if (res.code === 0) {
						this.$emit('search');
					}
				})
				.catch(e => {
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
		},
		toDetail(data) {
			uni.navigateTo({
				url: `/pages/orgPage/serve/orderDetail/orderDetail?id=${data.id}`
			});
		}
	}
};
</script>

<style lang="stylus">
.list_item
	display flex
	flex-direction column
	background-color #FFFFFF
	border-radius 12rpx
	margin-top 20rpx
	.info_panel
		width 100%
		display flex
		justify-content space-between
		padding 20rpx
		box-sizing border-box
		.image
			width 204rpx
			height 204rpx
			border-radius 23rpx
		.info
			flex 1
			margin-left 20rpx
			box-sizing border-box
			display flex
			flex-direction column
			justify-content space-between
			.info_header
				width 100%
				display flex
				justify-content space-between
				.title
					flex 1
					margin-right 10rpx
					letter-spacing 1rpx
					font-size 32rpx
					font-family PingFang SC
					font-weight 400
					color #333333
					display flex
					.titile_text{
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
						-webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
						-webkit-line-clamp: 1; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
						word-wrap: break-word;
					}
					.sign
						margin-left 10rpx
						font-size 28rpx
						font-family PingFang SC
						font-weight 400
						color #FFFFFF
						padding 4rpx
						border-radius 8rpx
						transform scale(0.7)
					.green
						background-color rgba(0, 181, 0, 1)
					.orange
						background-color rgba(246, 132, 21, 1)
				.type
					position relative
					top 5rpx
					font-size 24rpx
					font-family PingFang SC
					font-weight 400
					color rgba(255, 125, 33, 1)
			.info_container
				flex 1
				margin-top 15rpx
				display flex
				flex-direction column
				.tel
					font-size 28rpx
					font-family PingFang SC
					font-weight 400
					color #666666
				.site
					width 100%
					margin-top 20rpx
					padding 8rpx 20rpx 9rpx 20rpx
					box-sizing border-box
					font-size 24rpx
					font-family PingFang SC
					font-weight 400
					color #FB7B22
					background #FFF7F2
					border-radius 4px
					display flex
					align-items center
					.nursing-icon
						margin-right 5rpx
						font-size 22rpx
					.text
						width 100%
						overflow hidden
						text-overflow ellipsis
						display -webkit-box // 将对象作为弹性伸缩盒子模型显示。
						-webkit-box-orient vertical // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
						-webkit-line-clamp 1 // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
						word-wrap break-word
			.info_footer
				margin-top 10rpx
				display flex
				justify-content space-between
				.organization
					background-color rgba(37, 143, 255, 0.1)
					font-size 24rpx
					font-family PingFang SC
					font-weight 400
					color #4594FF
					border-radius 10rpx
					padding 3rpx 8rpx
				.count
					font-size 24rpx
					font-family PingFang SC
					font-weight 400
					color #999999
	.price_panel
		margin-top 15rpx
		padding 0rpx 20rpx 20rpx 20rpx
		box-sizing border-box
		.price
			display flex
			.total, .subsidy, .payment
				font-size 24rpx
				font-family PingFang SC
				font-weight 400
				color #999999
				flex 1
				text-align right
			.payment
				color rgba(51, 51, 51, 1)
		.btn_panel
			display flex
			padding-top 30rpx
			margin-bottom 20rpx box-sizing border-box
			.cancel, .detail, .confirm
				display inline-block
				font-size 24rpx
				font-family PingFang SC
				font-weight 400
				color #999999
				border 2rpx solid rgba(153, 153, 153, 1)
				padding 6rpx 20rpx
				border-radius 24rpx
			.detail
				border-color rgba(255, 125, 33, 1)
				color rgba(255, 125, 33, 1)
			.confirm
				margin-left 30rpx
				border-color rgba(255, 125, 33, 1)
				background-color rgba(255, 125, 33, 1)
				color rgba(255, 255, 255, 1)
			.cancel
				color #999999
				border 2rpx solid rgba(153, 153, 153, 1)
			.btn_left
				flex 1
</style>
